<template>

	<view>
		<u-swiper :list="swiper_img" autoplay interval="2000" indicator indicatorMode="dot" indicatorActiveColor="red"
			circular imgMode="heightFix" height="380rpx">
		</u-swiper>
		<u-notice-bar :text="notice" color="#2c2c2c" bgColor="#e3e4d9"></u-notice-bar>
		<!-- 常用功能 -->
		<view class="content">
			<view class="changyong">
				常用功能
			</view>
			<view class="function">
				<view class="function_item" v-for="(p,index) in functions" :key="index" @click="toFunction(p)">
					<image :src="p.img"></image>
					<text><u-text :text="p.text"></u-text></text>
				</view>
			</view>
		</view>
		<!-- 公告/资讯/消息 -->
		<view class="content2">
			<view class="changyong">
				App公告
			</view>
			<view class="new">
				<view class="new_item " v-for="(item,index) in noticeData " :key="index"
					@click="toNoticeDetail(item.noticeId)">
					<up-image :src="item.imgSrc" width="130rpx" height="130rpx"></up-image>
					<view class="content">
						<view class="title">
							<view class="title_title">
								{{item.title}}
							</view>
							<view class="title_time">
								{{item.time}}
							</view>
						</view>
					</view>
				</view>

			</view>
			<!-- 提示该列表为空内容 -->
			<u-empty mode="list" v-show="noticeData.length == 0" />
		</view>
		<!-- 提示去登录 -->
		<u-modal :show="loginShow" @confirm="toLogin" @cancel="closeLoginShow" content="您还没有登录" showCancelButton
			confirmText="去登录"></u-modal>
		<!-- 功能尚未开放的提示 -->
		<u-modal :show="unopenShow" content="该功能尚未开放" @confirm=" closeUnopenShow"></u-modal>
	</view>
</template>

<script setup>
	import {
		useNoticeStore
	} from "@/stores/noticeStore.js"
	import {
		useUserStore
	} from "@/stores/userStore.js"
	import {
		useSchoolStore
	} from "@/stores/schoolStore.js"
	import {
		computed,
		reactive,
		ref
	} from "vue"
	import {
		onShow
	} from "@dcloudio/uni-app";
	const noticeStore = useNoticeStore();
	const userStore = useUserStore();
	const schoolStore = useSchoolStore();
	const notice = ref("")
	const swiper_img = computed(() => {
		return schoolStore.school.imgSrc
	})
	const functions = reactive([{
		img: "/static/images/gonggao.png",
		text: "校园公告",
		url: "/pages/notice/notice"
	}, {
		img: "/static/images/fuwu.png",
		text: "服务通知",
		url: "/pages/service/service"
	}, {
		img: "/static/images/xinwen.png",
		text: "校园新闻"
	}, {
		img: "/static/images/xianzhi.png",
		text: "闲置",
		url: "/pages/unused/unused"
	}, {
		img: "/static/images/huodong.png",
		text: "校园活动"
	}, {
		img: "/static/images/shiwu.png",
		text: "失物招领",
		url: "/pages/lost/lost"
	}, {
		img: "/static/images/biaobai.png",
		text: "表白墙",
		url: "/pages/confessionWall/confessionWall"
	}, {
		img: "/static/images/more.png",
		text: "更多应用"
	}])
	const noticeData = computed(() => {
		return noticeStore.noticeList
	})
	const username = ref("")

	function toFunction(item) {
		if (item.text == "更多应用" || item.text == "校园新闻" || item.text == "校园活动") {
			unopenShow.value = true;
		} else {
			if (username.value == "") {
				loginShow.value = true;
			} else {
				uni.navigateTo({
					url: item.url
				})
			}
		}
	}

	function toNoticeDetail(noticeId) {

		uni.navigateTo({
			url: `/pages/noticeDetail/noticeDetail?noticeId=${noticeId}`
		})

	}
	// 登录提示
	const loginShow = ref(false);

	function toLogin() {
		loginShow.value = false;
		uni.navigateTo({
			url: "/pages/login/login"
		})
	}

	function closeLoginShow() {
		loginShow.value = false;
	}
	// 提示该功能尚未开放
	const unopenShow = ref(false);

	function closeUnopenShow() {
		unopenShow.value = false;
	}

	onShow(async () => {
		if (uni.getStorageSync("user")) {
			let user = JSON.parse(uni.getStorageSync("user"));
			username.value = user.username
			await userStore.getCount(user.schoolId)
			await schoolStore.getSchoolById(user.schoolId)
			notice.value =
				`感谢有你，惠校连目前拥有${userStore.total.allCount || 0}个用户,${schoolStore.school.schoolName}目前拥有${userStore.total.schoolCount}个用户`
		} else {
			username.value = ""
			await userStore.getCount(-1)
			await schoolStore.getSchoolById(-1)
			notice.value = `感谢有你，惠校连目前拥有${userStore.total.allCount || 0}个用户`
		}
		await noticeStore.getNoticeList(-1);
	})
</script>

<style lang="scss">
	body {
		background-color: #f0f0f0;
		width: 100%;

		.changyong {
			font-size: 34rpx !important;
			padding-top: 10rpx;
			margin-left: 10rpx;
		}

		.content {
			margin-top: 30rpx;
			background-color: #fff;
			width: 92%;
			margin: auto;
			border-radius: 30rpx;
			margin-bottom: 30rpx;

			.function {
				width: 95%;
				padding-bottom: 30rpx;
				margin: auto;

				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;


				.function_item {
					display: flex;
					flex-direction: column;
					background-color: rgba(47, 119, 241, 0.1);
					border-radius: 20rpx;
					margin-top: 30rpx;
					width: 150rpx;
					height: 150rpx;
					align-items: center;
					font-size: 35rpx;
					box-shadow: 10rpx 10rpx 10rpx rgba(0, 0, 0, 0.2);

					image {
						margin-top: 10rpx;
						width: 80rpx;
						height: 80rpx;

					}

					text {
						margin-top: 8rpx;
					}
				}
			}
		}

		// 
		.content2 {
			margin-top: 30rpx;
			background-color: #fff;
			width: 92%;
			margin: auto;
			border-radius: 30rpx;
			margin-bottom: 30rpx;
			height: 100%;

			.changyong {
				margin-bottom: 30rpx;
			}

			.new {
				// margin-top: 30rpx;
				height: 100%;
				// background-color: blue;
				width: 95%;
				// padding: 40rpx auto;
				padding-bottom: 30rpx;
				margin: auto;

				.new_item {
					display: flex;
					align-items: center;

					padding: 15rpx;

					.title {
						margin-left: 20rpx;
						margin-top: 20rpx;

						.title_title {
							font-size: 32rpx;
							font-weight: bold;
						}

						.title_time {
							margin-top: 30rpx;
							font-size: 26rpx;
							color: #ccc;
						}
					}
				}
			}
		}
	}
</style>